<template>
  <div>
    {{ $t(labelValue) }}
  </div>
</template>
<script>
  export default {
    props: {
      value: {
        type: [String, Array],
        default: () => ''
      },
      dataList: {
        type: Array,
        default: () => [],
        desc: '数组'
      },
      labelParams: {
        type: String,
        default: () => 'dictLabel',
        desc: '传进数组对象的属性名称 作为显示值'
      },
      valueParams: {
        type: String,
        default: () => 'dictValue',
        desc: '传进数组对象的属性名称 作为实际值'
      },
      dictVal: {
        type: String,
        default: () => ''
      }
    },
    data() {
      return {
        options: [],
        // 真实值
        nval: this.value,
        labelValue: undefined
      }
    },
    watch: {
      value: {
        handler(newVal) {
          if (newVal) {
            this.nval = newVal
            this.labelValue = this.selectListLabel(this.options, this.nval, 'dictLabel', 'dictValue')
          } else {
            this.nval = this.sval = ''
          }
        },
        deep: true,
        immediate: true
      },
      dataList: {
        handler() {
          this.load()
        },
        deep: true, // 深度监听
        immediate: true // 初始加载
      }
    },
    created() {
      this.$nextTick(() => {
        this.load()
      })
    },
    methods: {
      load() {
        this.options = []
        if (this.dictVal) {
          this.getDicts(this.dictVal).then((response) => {
            this.options = response.data
            this.labelValue = this.selectListLabel(this.options, this.nval, 'dictLabel', 'dictValue')
          })
        } else {
          for (let i = 0; i < this.dataList.length; i++) {
            const row = {
              dictLabel: this.dataList[i][this.labelParams],
              dictValue: this.dataList[i][this.valueParams]
            }
            this.options.push(row)
          }
          this.labelValue = this.selectListLabel(this.options, this.nval, 'dictLabel', 'dictValue')
        }
      }
    }
  }
</script>
